<template>
	<view class="tx">
		<headertop title="提现" str1="oridei"></headertop>
		<view class="txback">

		</view>
		<view class="txcard">
			<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/Group 11888@2x.png" class="txcardback"
				mode="widthFix"></image>
			<view class="dqtixiantext">
				<view class="t1">
					当前可提现金额（元）
				</view>
				<view class="t2">
					{{ Number(userobj.money).toFixed(2)}}
				</view>
			</view>
		</view>
		<view class="txjine">
			<view class="center">
				<view class="t1">
					提现金额
				</view>
				<view class="jineline">
					<view class="left">
						<view class="danwei">
							￥
						</view>
						<input type="digit" v-model="money" placeholder="请输入提现金额" />
						（元）
					</view>
					<view class="alltx" @click="allclick">
						全部提现
					</view>
				</view>
				<view class="tixianzhiline">
					<view class="title">
						提现至
					</view>
					<view class="yinhkinfo" @click="xz">
						<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/Frame@2x.png" class="yl"
							mode=""></image>
						<span
							v-if="list.length&&!list1.length">{{list[0].bankname}}（{{list[0].cardnum.slice(-4)}}）</span>
						<span
							v-if="list.length&&list1.length">{{list1[0].bankname}}（{{list1[0].cardnum.slice(-4)}}）</span>
						<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/Frame@2x(1).png"
							class="arrowright" mode=""></image>
					</view>
				</view>
			</view>
		</view>

		<view class="fixed">
			<view class="sqtx" @click="sqtx">
				申请提现
			</view>
		</view>
		<up-popup :show="show" mode="center">
			<view class="popucenter">
				<!-- 	<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/Frame@2x(11).png" @click="show=false"
					class="removeicon" mode=""></image> -->
				<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/Frame@2x(10).png" class="icon" mode="">
				</image>
				<view class="t1">
					提现申请已提交
				</view>
				<view class="t2">
					资金正在飞奔而来，请耐心等待到账。
				</view>
				<view class="btn" @click="back">
					确定
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import headertop from '@/components/header.vue'
	import {
		ref,
		reactive
	} from 'vue'
	import {
		$api
	} from '../../ulm';
	import {
		onPageScroll,
		onLoad,
		onShow
	} from "@dcloudio/uni-app";

	const userobj = ref({})
	const list = ref([])
	const show = ref(false)
	const tixiancontent = ref('')
	const rulesList = ref([])
	const money = ref('')
	const list1 = ref([])
	onShow(() => {
		list.value = []
		list1.value = []
		getuser()
	})



	function back() {
		show.value = false
		uni.navigateBack()
	}

	function allclick() {
		if (!userobj.value.money) {
			uni.showToast({
				title: '暂无可提现金额',
				icon: 'none'
			})
			return
		}
		if (userobj.value.money == '0.00') {
			uni.showToast({
				title: '暂无提现金额',
				icon: 'none'
			})
			return
		}
		money.value = userobj.value.money
	}
	async function sqtx() {
		var bid = ''
		if (list.value.length && !list1.value.length) {
			bid = list.value[0]['id']
		}
		if (list.value.length && list1.value.length) {
			bid = list1.value[0]['id']
		}
		if (!bid) {
			uni.showToast({
				title: '请添加提现账户',
				icon: 'none'
			})
			return
		}
		if (!money.value) {
			uni.showToast({
				title: '请输入提现金额',
				icon: 'none'
			})
			return
		}
		const res = await $api.addtixian({
			money: money.value,
			bid
		})
		if (res.code == 1) {
			show.value = true
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}
	async function getuser() {
		const res = await $api.userxinxi()
		if (res.code == 1) {
			userobj.value = res.data
			init()
		}
	}
	async function init() {
		const res = await $api.banklist({
			page: 1,
			limit: 20
		})
		if (res.code == 1) {
			list.value = res.data.list
			if (uni.getStorageSync('zhId')) {
				var zid = uni.getStorageSync('zhId')
				list1.value = res.data.list.filter(item => item.id == zid)
				uni.removeStorageSync('zhId')
			}

		}
	}

	function xz() {
		uni.navigateTo({
			url: '/sub_me/index/zhgl?typestr=dz'
		})
	}
</script>

<style lang="scss">
	::v-deep .u-popup__content {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	.popucenter {
		width: 518rpx;
		height: 488rpx;
		background: linear-gradient(180deg, #CAEEFF 0%, #FFFFFF 23%);
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;
		position: relative;

		.removeicon {
			position: absolute;
			width: 44rpx;
			height: 44rpx;
			top: 32rpx;
			right: 32rpx;
		}

		.icon {
			width: 124rpx;
			height: 124rpx;
			margin-top: 76rpx;
		}

		.t1 {
			font-weight: 500;
			font-size: 32rpx;
			color: #1D2129;
			margin-top: 24rpx;
		}

		.t2 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #4E5969;
			margin-top: 24rpx;
		}

		.btn {
			width: 244rpx;
			height: 74rpx;
			background: #13A2E6;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			text-align: center;
			line-height: 74rpx;
			margin-top: 50rpx;
			color: #FFFFFF;
			font-size: 28rpx;
		}
	}

	// 提现说明
	.draw-notice {
		width: 684rpx;
		background: #ffffff;
		border: 2rpx solid #fffaee;
		border-radius: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;

		.title {
			font-weight: 500;
			color: #333333;
			font-size: 30rpx;
		}

		.draw-list {
			font-size: 24rpx;
			color: #999999;
			line-height: 46rpx;
		}
	}

	.tx {
		width: 100%;
		overflow: hidden;
		position: relative;

		.fixed {
			width: 100%;
			overflow: hidden;
			background: #FFFFFF;
			box-shadow: 0rpx -4rpx 10rpx 0rpx rgba(0, 0, 0, 0.06);
			position: fixed;
			bottom: 0%;

			.sqtx {
				width: 686rpx;
				height: 82rpx;
				background: #13A2E6;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				text-align: center;
				line-height: 82rpx;
				font-family: PingFang SC, PingFang SC;
				font-size: 32rpx;
				color: #FFFFFF;
				margin: auto;
				margin-top: 22rpx;
				margin-bottom: 84rpx;
			}
		}


		.txback {
			width: 100%;
			height: 530rpx;
			background: linear-gradient(180deg, #CAEEFF 71%, rgba(240, 250, 255, 0) 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: absolute;
			z-index: -1;
		}

		.txjine {
			width: 100%;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			background: #fff;
			overflow: hidden;
			margin-top: -140rpx;

			.center {
				width: 686rpx;
				overflow: hidden;
				margin: auto;

				.t1 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 36rpx;
					color: #1D2129;
					margin-top: 32rpx;
				}

				.tixianzhiline {
					width: 100%;
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					justify-content: space-between;

					.title {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #1D2129;
					}

					.yinhkinfo {
						display: flex;
						align-items: center;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #1D2129;

						.yl {
							width: 36rpx;
							height: 36rpx;
							margin-right: 12rpx;
						}

						.arrowright {
							width: 32rpx;
							height: 32rpx;
						}
					}
				}

				.jineline {
					width: 100%;
					overflow: hidden;
					display: flex;
					border-bottom: 2rpx solid #C9CDD4;
					align-items: center;
					justify-content: space-between;
					margin-top: 46rpx;

					.alltx {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						align-items: center;
						display: flex;
						color: #2AB4F5;
						text-decoration: underline;
					}

					.left {
						display: flex;
						align-items: center;

						.danwei {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 56rpx;
							color: #333333;
							margin-right: 12rpx;
						}
					}

				}
			}
		}

		.txcard {
			width: 686rpx;
			height: 372rpx;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin: auto;
			margin-top: 192rpx;
			position: relative;

			.txcardback {
				width: 100%;
				z-index: -1;
				position: absolute;
			}
		}

		.dqtixiantext {
			margin-left: 36rpx;
			margin-top: 52rpx;
			overflow: hidden;

			.t1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				margin-top: 52rpx;
			}

			.t2 {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 56rpx;
				color: #FFFFFF;
				margin-top: 40rpx;
			}
		}
	}
</style>